<template>
	<div class="mine_container">
		<!--头部开始-->
		<div class="head">
			<div class="set_icon clearfix">
				<router-link to="/mine/set"></router-link>
			</div>
			<div class="introduce">
				<div class="introduce_pic">
				</div>
				<div class="introduce_tit">
					<p class="tit">{{mydetail.nickName}}</p>
					<p class="id">ID:{{mydetail.ofansID}}</p>
				</div>
				<div class="introduce_des">
					<span>个性签名：</span>
					<span>{{mydetail.personsign}}</span>
				</div>
			</div>
			<div class="erweima">
				<div class="erweima_left">
					<span><img src="../../../static/images/47/profile_erweima_icon.png"/></span>
					<span>我的二维码</span>
				</div>
				<div class="erweima_right">
					<span><img src="../../../static/images/47/profile_edit_icon.png"/></span>
					<router-link to="/mine/information"><span>编辑资料</span></router-link>
				</div>
			</div>
		</div>
		<div class="head_cover">
		</div>
		<!--头部结束-->
		<!--主体开始-->
		<div class="main">
			<!--引入上传图片插件begin-->
			<div class="photos">
		    <div class="demo-upload-list" v-for="item in uploadList">
		        <template v-if="item.status === 'finished'">
		            <img :src="item.url">
		            <div class="demo-upload-list-cover">
		                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
		                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
		            </div>
		        </template>
		        <template v-else>
		            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
		        </template>
		    </div>
		    <Upload
		        ref="upload"
		        :show-upload-list="false"
		        :default-file-list="defaultList"
		        :on-success="handleSuccess"
		        :format="['jpg','jpeg','png']"
		        :max-size="2048"
		        :on-format-error="handleFormatError"
		        :on-exceeded-size="handleMaxSize"
		        :before-upload="handleBeforeUpload"
		        multiple
		        type="drag"
		        action="//jsonplaceholder.typicode.com/posts/"
		        style="display: inline-block;">
		        <div class="camera">
		        	<img src="../../../static/images/47/profile_photo_add_pressed.png"/>
		        </div>
		    </Upload>
		    <Modal title="查看图片" v-model="visible">
		        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
		    </Modal>
			</div>
			<!--引入上传图片插件end-->
			<!--<div class="photos">
				<span>
					照片集空空的，快点儿添加吧￣︶
				</span>
				<a href=""><img src="../../../static/images/47/profile_photo_add_pressed.png"/></a>
			</div>-->
			<!--功能区-->
			<div class="feature">
				<router-link to="/mine/about">
				<div class="about">
					<p>关于偶粉</p>
                    <span></span>
				</div>
				</router-link>
				<img src="../../../static/images/47/line.png"/>
				<router-link to="/mine/feedback">
				<div class="feedback">
					<p>意见反馈</p>
                    <span></span>
				</div>
				</router-link>
				<img src="../../../static/images/47/line.png"/>
				<div class="cerify" v-on:click="popup">
					<p>我要认证</p>
                    <span></span>
				</div>
			</div>
		</div>
		<!--主体结束-->
		<!--底部开始-->
		<div class="foot">
			<ul>
				<router-link to="/clips">
				<li class="one">
					<span>片花</span>
				</li>
				</router-link>
				<router-link to="/circle">
				<li class="two">
					<span>圈子</span>
				</li>
				</router-link>
				<router-link to="/other">
				<li class="three">
					<span>动态</span>
				</li>
				</router-link>
				<router-link to="/mine">
				<li class="four">
					<span>我的</span>
				</li>
				</router-link>
			</ul>
		</div>
		<!--认证弹框-->
		<div class="popup_cover" v-show="show">
			<div class="attestation">
				<div class="cover">
					<router-link to="/mine/star">
					<div class="star">
						明星认证
					</div>
					</router-link>
					<div class="producer">
						制作方认证
					</div>
				</div>
				<div class="btn" @click="cancel">
					取消
				</div>
			</div>
		</div>
		
	</div>
	
</template>

<script>
    export default {
    	name:"Index",
        data () {
            return {
            	show:false,
            	//图片
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: [],
                mydetail:{
					id:0,
					headPic:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503418157954&di=3091582d14814260d537baf030181d45&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_4_1833587028D3067586516_21.jpg",
					nickName:"正在加载",
					ofansID:"正在加载",
					twocode:"正在加载",
					phone:"正在加载",
					sex:"正在加载",
					userPicList:[
						"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2600862994,2565094368&fm=117&gp=0.jpg",
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=523024675,1399288021&fm=117&gp=0.jpg",
						"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2182925329,386985427&fm=117&gp=0.jpg"
					],
					personsign:"用简短的一句话介绍自己，让更多人认识"
				}
            }
        },
        methods: {
        	popup(event){
				this.show = !this.show;
			},
			cancel(event){
				this.show = !this.show;
			},
			//图片上传组件
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                // 从 upload 实例删除数据
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                // 因为上传过程为实例，这里模拟添加 url
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        },
        created(){
			var $this =this;
			this.$axios.get('http://127.0.0.1:3000/mine/mydetail?id='+'08220003').then(res=>{
				console.log(res.data)
				$this.mydetail = res.data;
			})	
		}
    }
	
</script>

<style scoped lang="less">
.mine_container{
    position: relative;
    overflow: hidden;
    margin-bottom: 96/64rem;
    .head{
        width: 100%;
        background: url(../../../static/images/47/mine_headpic3.jpg) no-repeat ;
        background-size: 100% 100%;
        -webkit-mask: url(../../../static/images/17/photo_bg.png);
     }
}
.set_icon{
    width: 100%;
    height: 110/64rem;
    a{
        width: 45/64rem;
        height: 45/64rem;
        background: url(../../../static/images/47/profile_set_icon_normal.png);
        position: absolute;
        background-size:45/64rem 45/64rem;
        right: 50/64rem;
        top: 60/64rem;
    }
}
.introduce{
    padding: 0 60/64rem  ;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    .introduce_pic{
        width: 160/64rem;
        height: 160/64rem;
        border-radius: 50%;
        border: 5px solid #ECE4DF;
        margin: 0 auto;
        background: url(../../../static/images/47/mine_headpic2.jpg);
        background-size:160/64rem 160/64rem ;
    }
    .introduce_tit{
        .tit{
            font-size: 30/64rem;
            color: #FFFFFF;
            margin-top: 16/64rem;
        }
        .id{
            font-size: 24/64rem;
            color: rgba(255,255,255,0.6);
        }
    }
    .introduce_des{
        margin: 32/64rem 0;
        font-size: 26/64rem;
        text-align: left;
        color: rgba(255,255,255,0.6);
    }
}
.erweima{
    padding: 19/64rem 0;
    background:rgba(0,0,0,0.2) ;
    height: 100/64rem;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 30/64rem;
    img{
        width: 45/64rem;
        height: 45/64rem;
        vertical-align: middle;
    }
    .erweima_left{
        padding: 10/64rem 0;
        float: left;
        padding-left: 60/64rem;
        border-right: 2px solid #796a54;
        span:last-child{
            padding-left: 24/64rem;
            padding-right: 45/64rem;
        }
    }
    .erweima_right{
        padding: 10/64rem 0;
        float: left;
        padding-left: 60/64rem;
        span:last-child{
            padding-left: 24/64rem;
            color: #FFFFFF;
        }
    }
}
.mine_container .main{
    background: #f2eef9;
    border: 1px solid rgba(0,0,0,0);
}
.main{
    .photos{
        margin: 20/64rem;
        padding: 10/64rem;
        border: 1px solid #d1cbdc;
        border-radius: 5/64rem;
        background: #faf9f8;        
        span{
            color: #d1cbdc;
            font-size: 30/64rem;
           
        }
        img{
             vertical-align: middle;
             width: 110/64rem;
             height: 110/64rem;
        }
    }
    .feature{
        background: #FFFFFF;
        padding-left: 50/64rem;
        margin: 20/64rem 0 5/64rem 0;
        img{
        	width: 100%;
        }
        .about{
            background: url(../../../static/images/47/profile_about_icon.png) no-repeat 0 50%;
            background-size: 40/64rem 40/64rem;
            height: 90/64rem;
            line-height: 70/64rem;
            border-top: 14/64rem solid rgba(0,0,0,0);
        }
        .feedback{
            background: url(../../../static/images/47/profile_feedback_icon.png) no-repeat 1/64rem 50%;
            background-size: 39/64rem 38/64rem;
            height: 90/64rem;
            line-height: 90/64rem;
        }
        .cerify{
            background: url(../../../static/images/47/profile_cerify_icon.png) no-repeat -2/64rem 50%;
            background-size: 43/64rem 46/64rem;
            height: 90/64rem;
            line-height: 90/64rem;
        }
        p{
            font-size: 36/64rem;
            color: #1b1b1b;
            font-weight: 400;
            font-family: "微软雅黑";
            margin-left: 66/64rem;
            display: inline-block;
        }
        span{
            	background: url(../../../static/images/29-30-34/插入箭头.png) no-repeat center ;
            	background-size: 100%;
            	display: inline-block;
            	width: 17/64rem;
            	height: 100%;
            	float: right;
            	margin-right: 30/64rem;
        }
    }
}
.mine_container{
    .foot{
    	position: fixed;
		bottom: 0;
		background: #fff;
        height: 96/64rem;
        width: 100%;
        border-top: 1px solid #CB9CF0;
        ul{
        	width:530/64rem;
        	margin: 0 auto;
        	padding-top:14/64rem;
            li{
                text-align: center;
                float: left;
                width: 42/64rem;
                color: #a0a0a0;
                height: 100%;
                padding-top:51/64rem;
                margin-right:120/64rem;
                span{
                	font-size:20/64rem;
                	color:#000000;
                }
            }
            .one{
                background: url(../../../static/images/1/main_trailer_normal.png) no-repeat;
                background-size: 100%;
            }
            .two{
                background: url(../../../static/images/1/main_circle_normal.png) no-repeat;
                background-size: 100%;
            }
            .three{
                background: url(../../../static/images/1/main_dynamic_normal.png)no-repeat;
                background-size: 100%;
            }
            .four{
                background: url(../../../static/images/1/main_profile_selected.png) no-repeat;
                background-size: 100%;
                margin-right:0;
                span{
                	color:#A54CE8;
                }
            }
        }
    }

}

.popup_cover{
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 100;
    background: url(../../../static/images/48/弹出半透明.png) no-repeat bottom;
    background-size: 100%;
    .attestation{
        position: absolute;
        bottom: 20/64rem;
        left: 20/64rem;
        z-index: 120;
        .cover{
            background: url(../../../static/images/48/弹出底.png);
            background-size: 100% 100%;
            width: 600/64rem;
            height: 197/64rem;
            margin-bottom: 12/64rem;
            .star,.producer{
                float: left;
                width: 50%;
                height: 100%;
                text-align: center;
                padding-top: 140/64rem;
                font-size: 30/64rem;
                box-sizing: border-box;
                color: #434343;
            }
            .star{
                background: url(../../../static/images/48/明星-1.png) no-repeat 50% 24/64rem;
                
            }
            .producer{
                background: url(../../../static/images/48/制片-1.png) no-repeat 50% 24/64rem;
            }
        }
        .btn{
            background: url(../../../static/images/48/弹出底.png);
            background-size: 100% 100%;
            width: 600/64rem;
            height: 90/64rem;
            color: #a54be8;
            font-size: 36/64rem;
            text-align: center;
            line-height: 90/64rem;
        }
    }

}


//上传图片样式
 .demo-upload-list{
        display: inline-block;
        width: 110/64rem;
        height: 110/64rem;
        text-align: center;
        line-height: 60px/64rem;
        border: 1px solid transparent;
        border-radius: 4/64rem;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 30/64rem;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20/64rem;
        cursor: pointer;
        margin: 0 2/64rem;
    }
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body,
p,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

input,
textarea,
select {
	padding: 0;
	border: 1px solid #ccc;
	outline: 0;
	font-size: 100%;
}

i {
	font-style: normal;
}

b {
	font-weight: normal;
}

ul,
ol {
	padding-left: 0;
	list-style: none;
}

a {
	text-decoration: none;
}

a,
img {
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wrap{
	width: 1000px;
	margin: 0 auto;
}
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}
body{
	font-family: "微软雅黑";
}


</style>